<template>
	<view class="res_detail">
		<view class="user_field">
			<view class="user_avatar">
				<image :src="user.avatarUrl" class="avatar_image"></image>
			</view>
			<i class="user_name">{{user.name}}</i>
		</view>
		<view class="collect_field">
			<collect :collectNum="rest.article.favoriteNumber" :type="'m'" :mid="id" :uid="10001"></collect>
		</view>
		<view class="img_carosel">
			<swiper :interval="3000" :duration="1000" :indicator-dots="true" :autoplay="true" :circular="true">
				<swiper-item v-for="(item,index) in rest.article.pictures" :key="index">
					<image :src="item.filePath" mode="aspectFill"></image>				
				</swiper-item>
			</swiper>
		</view>
		<view class="res_attributes">
			<image src="../../../static/icons/mifan.png" class="attribute_icon"></image>
			<view class="res_name">{{rest.merchant.name}}</view>
			<view class="res_stars">
				<stars :light_num="rest.merchant.index" :dark_num="5-rest.merchant.index"></stars>
			</view>
			<view class="res_price">￥{{rest.merchant.price}}/人</view>			
			<h class="res_describe">
				<p class="res_shareReason">分享理由</p>
				{{rest.merchant.reason}}
			</h>
			<view class="res_tags">
				<tag :tags="tags"></tag>
			</view>
			<view class="res_location"> 
				<addresss :latitude="rest.merchant.addressY" :longitude="rest.merchant.addressX"></addresss>
				<distance :latitude="rest.merchant.addressY" :longitude="rest.merchant.addressX"></distance>
			</view>
		</view>
		<view class="res_foods">
			<image src="../../../static/icons/caipin.png" class="res_foods_icon"></image>
			<h>店铺美食</h>
			<scroll-view  scroll-x="true" class="food-items" >
				<view class="food_item" v-for="(item,index) in rest.merchant.dashes" :key="index">
					<image :src="item.url" class="food_item_img"></image>
					<view class="food_item_describe">
						<i class="food_item_title">{{item.name}}</i>	
						<p class="food_item_describe">  {{item.description}}</p>
					</view>
				</view>
			</scroll-view>
		</view>
		<view class="comment_field">
			<comment :comments="rest.article.articleComments" :type="'Merchant'" :fid="rest.merchantArticleID" :uid="10001"></comment>
		</view>
	</view>
</template>

<script>
	import stars from "../../../components/stars.vue"
	import tag from "../../../components/tag.vue"
	import collect from "../../../components/collect.vue"
	import comment from "../../comment/user-comment/comment.vue"
	import addresss from "../../../components/address.vue"
	import distance from "../../../components/distance.vue"
	export default {
		components:{
			stars,
			tag,
			collect,
			comment,
			addresss,
			distance
		},
		data(){
			return{			
				swipers:[
					{src:"../../../static/images/zhouheiya.png"},
					{src:"../../../static/images/zhouheiya2.png"},
					{src:"../../../static/images/zhouheiya3.png"},
				],
				tags:["异域美食","正餐优选"],
				id:0,
				rest:null,
				user:null
				
			}
		},
		watch:{
			rest(newVal,oldVal){
				this.getuser()
			}
		},
		methods:{
			async getResDetail(){
				const res=await this.$myRequest({
					url:'/MerchantArticle/api/findAllLoad/id='+this.id
				})
				console.log(res)
				this.rest=res.data
				
			},
			async getuser(){
				const res=await this.$myRequest({
					url:'/User/api/find/id='+this.rest.userID
				})
				this.user=res.data
			}
		},
		onLoad(options){
			this.id=options.id
			console.log(this.id)
			this.getResDetail()
		}
	}
</script>

<style lang="less">
	.user_field{
	float:left;
		min-width: 80%;
		height:32px;
		.user_avatar{
			border:1px solid #eee;
			border-radius:50%;
			height:32px;
			width:32px;
			margin-left: 8px;
			margin-right: 8px;
			float: left;
			.avatar_image{
				height: 100%;
	            width:100%;
	            border-radius:50%;
	            background-color: #eee;
			}
		}
		.user_name{
			font-size: 14px;
			line-height: 32px;
		}
	}
	.collect_field{
		height:32px;
	}
	.img_carosel{
		margin-top: 10px;
		swiper{
			height: 300px;
			image{
			width:100%;
			height:300px;
			}
		}
	}
	.res_attributes{
		margin-top: 10px;
		margin-left:8px;
		padding-left: 8px;
		padding-right:8px;
		border-radius: 5%;
		width:90%;
		border:1rpx solid #fff;
		background-color: #fff;
		transform: translateY(-40px);
		.attribute_icon{
			width:50rpx;
			height:50rpx;
			float: left;
			margin-left: 30%;
			margin-top:10px;
		}
		.res_name{
			line-height: 50px;
			left:50%;
			font-size: 18px;
			font-weight: 600;
			letter-spacing: 1px;
		}
		.res_stars{
			margin-left:35%;
			float: left;
			margin-right:10px;
			height:25px;
		}
		.res_price{
			height:25px;
			line-height: 22px;
			font-size:13px;
		}
		.res_shareReason{
			height: 35rpx;
			width: 100rpx;
			background-color: #F0AD4E;
			font-size: 12px;
			line-height: 20px;
			text-align: center;
			float:left;
		}
		.res_describe{
			margin-top: 12px;
			margin-bottom: 8px;
			display: inline-block;
			font-size: 15px;
		}
		.res_tags{
			margin-top: 10px;
			font-size: 12px;
			color:#DD524D;
		}
		.res_location{
			margin-top:10px;
		}		
	}
	.res_foods{
		padding-left: 10px;
		.res_foods_icon{
			width:50rpx;
			height:50rpx;
			float: left;
		}
		h{
			line-height: 30px;
		}
		.food-items{
			width:100%;
			height:210px;
			white-space: nowrap; 
		}
		.food_item{
			border-radius: 5%;
			border:1rpx solid #DCDFE6;
			background-color: #fff;
			margin-top:10px;
			margin-right: 10px;
			display: inline-block;
			width:135px;
			height:185px;
			.food_item_img{
				height:100px;
				width:100%;				
			}
			.food_item_describe{
				max-width: 100%;

			}
			i{
				text-align: center;
				font-size: 15px;
				color: #f18888;
				font-weight: 600;
			}
			p{
				font-size: 12px;
				line-height: 20px;
				white-space:normal !important;
				word-break: break-all;
			}
		}
	}
	.comment_field{
		margin-top: 30px;
	}
</style>
